<template>
  <el-date-picker
    v-model="modelValue"
    :type="dateType"
    :placeholder="'请选择' + field.label"
    :format="format"
    :value-format="valueFormat"
  />
</template>

<script setup lang="ts">
import { computed } from "vue";
import { FormField } from "../utils";

interface Props {
  modelValue: string;
  field: FormField;
}

interface Emits {
  (e: "update:modelValue", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const modelValue = computed({
  get: () => props.modelValue,
  set: value => emit("update:modelValue", value)
});

const dateType = computed(() =>
  props.field.type === "date" ? "date" : "datetime"
);
const format = computed(() =>
  props.field.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm"
);
const valueFormat = computed(() =>
  props.field.type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss"
);
</script>
